<template>
	<view style="padding-bottom: 160upx;">
		<view class="zcModel-active iconfont icon-shenhezhong">
			<navigator :url="'../followUp_history/followUp_history?SaleChanceSN='+SaleChanceSN">跟进历史</navigator>
		</view>
		<view>
			<view class="zcModel-title zcJustifyC_between"><view class="uni-flex zcAlignI_center">客户信息</view> <navigator :url="'../myCustomerInfo/myCustomerInfo?VehicleInfoSN='+CustomerInfo.VehicleInfoSN" class="iconfont icon-unie6a3 uni-flex zcAlignI_center">修改客户资料</navigator></view>
		</view>
		<view class="zcModel-card">
			<view>
				<view class="zcModel-card-item uni-flex zcAlignI_center">
					<view>客户：</view>
					<view class="zcBold">{{CustomerInfo.CustomerName}}</view>
				</view>
				<view class="zcModel-card-item uni-flex zcAlignI_center">
					<view>联系电话：</view>
					<view class="zcBold">{{CustomerInfo.CustomerTelephone}}</view>
                    <view class="iconfont icon-dianhua" @tap="callUp(CustomerInfo.CustomerTelephone)" ></view>
				</view>
				<view class="zcModel-card-item uni-flex zcAlignI_center">
					<view>车牌：</view>
					<view class="zcBold">{{CustomerInfo.VehiclePlateNo}}</view>
				</view>
				<view class="zcModel-card-item uni-flex zcAlignI_center">
					<view>车架号：</view>
					<view class="zcBold">{{CustomerInfo.VehicleVIN}}</view>
				</view>
				<view class="zcModel-card-item uni-flex zcAlignI_center">
					<view>车型：</view>
					<view class="zcBold">{{CustomerInfo.VehicldeModelFullName}}</view>
				</view>
				<view class="zcModel-card-item uni-flex zcAlignI_center">
					<view>客户不希望打扰：</view>
					<view class="card_item_text uni-flex zcAlignI_center">
						<checkbox-group @change="zcChengeValue" class="uni-flex zcFlex_row zcAlignI_center">
							<label class="checkbox">
								<checkbox :checked="CustomerInfo.CustomerIsNoBother" disabled="true" :style="{'transform':'scale(0.6)',}"/>
							</label>
						</checkbox-group>
					</view>
				</view>
			</view>
		</view>
		<view>
			<view class="zcModel-title zcJustifyC_between">任务列表</view>
		</view>
		<view v-if="TraceTask.length > 0">
			<block v-for="(item,index) in TraceTask" :key="index">
				<view class="zcModel-card">
					<view>
						<view class="zcModel-card-item uni-flex zcAlignI_center">
							<view>线索类型：</view>
							<view class="zcBold">{{item.SaleChanceCategory}}</view>
						</view>
						<view class="zcModel-card-item uni-flex zcAlignI_center">
							<view>跟进类别：</view>
							<view class="zcBold">{{item.TraceTaskTaskType}}</view>
						</view>
						<view class="zcModel-card-item uni-flex zcAlignI_center">
							<view>目的及说明：</view>
							<view class="zcBold">{{item.TraceTaskTracePurpose}}</view>
						</view>
						<view class="zcModel-card-item uni-flex">
							<view style="flex-shrink: 0;">上次跟进内容：</view>
							<view class="zcModel-card-item-text zcBold form_data">{{item.PrevTraceContent}}</view>
						</view>
						<view class="zcModel-card-item uni-flex zcAlignI_center">
							<view>任务时间：</view>
							<view class="zcBold form_data">{{item.DueDate}}</view>
						</view>
					</view>
					<!-- 跟进任务 展开内容 -->
					<view class="itemMore" :style="{'max-height':item.isTaskMore?'600px':'0'}">
						<view class="zcModel-card-item uni-flex zcAlignI_center">
							<view>跟进时间：</view>
							<picker class="zcPicker" style="border-radius: 10upx;" disabled="true" :value="item.TraceDate" mode="date" @change="dateChange">
								<view class="uni-input iconfont icon-riqi form_data">{{item.TraceDate}}</view>
							</picker>
						</view>
						<view class="zcModel-card-item uni-flex zcAlignI_center">
							<view>跟进结果：</view>
							<picker class="zcPicker" style="border-radius: 10upx;" :value="item.TraceResult" mode="selector" :data-id="index" :range="item.isTraceResult?result.range:result1.range" @change="resultChange">
								<view class="uni-input iconfont icon-sanjiaojiantoutriangular-copyAf">{{item.TraceResult}}</view>
							</picker>
						</view>
						<view class="zcModel-card-item uni-flex zcAlignI_center">
							<view>跟进原因：</view>
							<picker class="zcPicker" style="border-radius: 10upx;" :value="item.TraceResultReasonName" mode="selector" :data-id="index" :range="reason.range" range-key="Name" @change="reasonChange">
								<view class="uni-input iconfont icon-sanjiaojiantoutriangular-copyAf">{{item.TraceResultReasonName}}</view>
							</picker>
						</view>
						<view class="zcModel-card-item uni-flex">
							<view style="flex-shrink: 0;line-height: 1.1;">跟进内容：</view>
							<view v-if="!item.isAText" class="zcModel-card-item-stext" :data-id="index" @tap="zcTapATextValue" >{{item.Content?item.Content:''}}</view>
							<textarea v-else-if="item.isAText" :focus="item.isFouse" :value="item.Content" :show-confirm-bar="false" class="zcModel-card-item-text" @blur="doChangeText" maxlength="-1" :data-id="index" auto-height="true"></textarea>
						</view>
						<view class="zcModel-card-item uni-flex zcAlignI_center">
							<view>下次跟进时间：</view>
							<picker class="zcPicker" style="border-radius: 10upx;" :data-id="index" :value="item.NextTraceDate" mode="date" @change="dateChange1">
								<view class="uni-input iconfont icon-riqi">{{item.NextTraceDate}}</view>
							</picker>
						</view>
					</view>
					
					<view class="card_more" :data-id="index" @tap="doTaskMore" >
						{{item.moreButText}}
						<view class="iconfont icon-Order-Details-SeeMore" :data-id="index" @tap.stop="doTaskMore" :style="{'transform':item.isTaskMore?'rotate(180deg)':''}"></view>
					</view>
				</view>
				
			</block>
		</view>
		
		<view class="zcFooter-but uni-flex">
			<button type="primary " class="save_btn" @tap="zcSaveTraceTask4Tracing">提交</button>
		</view>
	</view>
</template>

<script>
	
	let _this;
	export default {
		data() {
			const currentDate = this.getDate({
				format: true
			})
			return {
				isSubmit:false,
				isTaskMore:false,
				moreButText:'展开详情',
				TraceTaskSN:'',
				TraceTask:[],
				result:{
					val:'',
					range:['延期','成功','失败']
				},
				result1:{
					val:'',
					range:['延期','失败']
				},
				reason:{
					val:'',
					SN:'',
					range:[]
				},
				CustomerInfo:{
					VehicleInfoSN:'',
					CustomerName:'',
					CustomerTelephone:'',
					VehiclePlateNo:'',
					VehicleVIN:'',
					VehicldeModelFullName:'',
					CustomerIsNoBother:false
				}
				
			}
		},
		onLoad(e) {
			_this = this;
			if (e.TraceTaskSN) {
				_this.TraceTaskSN = e.TraceTaskSN;
			}
			_this.zcGetTraceTask();		// 获取跟进任务详情
		},
		
		methods: {
			callUp(item) {
                if (!item) {
                   uni.showModal({
                       title: '温馨提示',
                       content: '尊敬的用户，请输入联系电话！',
                       showCancel: false
                   });
                    return
                }
                uni.makePhoneCall({
                    phoneNumber:item
                })
            },
			//  当前 系统时间 格式化  YY-MM-DD
			getDate() {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();
				
				month = month > 9 ? month : '0' + month;;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}-${day}`;
			},
			resultChange(e) {
				let id = e.target.dataset.id;
				let value = parseInt(e.target.value);
				
				let data = '';
				if (_this.TraceTask[id].isTraceResult) {
					_this.TraceTask[id].TraceResult = _this.result.range[value];
					data = _this.result.range[value];
				}else {
					_this.TraceTask[id].TraceResult = _this.result1.range[value];
					data = _this.result1.range[value];
				}
				
				
				_this.zcQueryTraceResultReasonList(data);	//	回访原因
			},
			reasonChange(e) {
				// console.log('跟进原因 = ',e);
				
				let id = e.target.dataset.id;
				let value = parseInt(e.target.value);
				_this.reason.val = _this.reason.range[value].Name;
				_this.TraceTask[id].TraceResultReasonName = _this.reason.range[value].Name;
				_this.TraceTask[id].TraceResultReasonSN = _this.reason.range[value].SN;
			},
			dateChange1(e) {
				
				let id = e.target.dataset.id;
				let value = e.target.value;
				_this.TraceTask[id].NextTraceDate = value;
			},
			doTaskMore(e) {
				let id = e.target.dataset.id;
				if (_this.TraceTask[id].isTaskMore) {
					_this.TraceTask[id].moreButText = '展开详情';
				}else{
					_this.TraceTask[id].moreButText = '收起详情';
				}
				
				_this.TraceTask[id].isTaskMore = !_this.TraceTask[id].isTaskMore;
			},
			doChangeText(e) {
				_this.Content = e.target.value;
				
				let id = e.target.dataset.id;
				let value = e.target.value;
				_this.TraceTask[id].Content = value;
				_this.TraceTask[id].isAText = false;
				_this.TraceTask[id].isFouse = false;
			},
			zcTapATextValue(res) {
				let id = res.target.dataset.id;
				let value = res.target.value;
				
				_this.TraceTask[id].isAText = true;
				
				setTimeout(()=>{
					_this.TraceTask[id].isFouse = true;
				},300)
			},
			//  数据接口区 -------------------------
			//  获取所有跟进任务
			zcGetTraceTask() {
				uni.showLoading({
					title: '加载中',
					mask: true
				});
				_this.$ZcPublic.Server.Post({
					IsNeedLogin: true,
					Paras: {
						Name: 'uni_Insure_Detail',
						Action: 'Ext_QueryTraceTask4SalesManTracing',	//	Ext_GetTraceTask
						Data: {
							SN:_this.TraceTaskSN
						}
					},
					Callback:function(resjson,scope) {
						if (resjson.state === 'back') {
							console.log('所有跟进任务 = ',resjson.data);
							if (!resjson.success) {
								uni.showModal({
									title:'温馨提示',
									showCancel:false,
									content:''+resjson.msg
								})
								return;
							}
							
							if (resjson.data!==null && resjson.data.length > 0) {
								
								let list = [];
								for (let i = 0; i < resjson.data.length; i++) {
									let item = {
										SaleChanceCategory:resjson.data[i].SaleChanceCategory,	//	线索类型
										TraceTaskTaskType:resjson.data[i].TraceTaskTaskType,	//	跟进类别
										TaskStatus: resjson.data[i].TaskStatus,	//	任务状态
										PrevTraceContent:resjson.data[i].PrevTraceContent,	//	上次跟进内容
										DueDate:resjson.data[i].TraceTaskDueDate,	//	任务时间
										isTraceResult:true,	//	跟进结果类型 , true:所有值 , false:只有 失败、延期
										TraceDate:_this.getDate(),	//	跟进时间
										TraceResult:'',	//	跟进结果
										TraceResultReasonName:'',	//	跟进原因
										TraceResultReasonSN:'',	//	跟进原因SN
										Content:'',	//	跟进内容（跟进目的 Content）
										NextTraceDate:'',	//	下次跟进时间
										SN : resjson.data[i].SN,	//	当前跟进任务的SN
										SaleChanceSN:resjson.data[i].SaleChanceSN,	//线索SN
										moreButText:'展开详情',
										isTaskMore:false,	//	是否展示详情
										isAText:false,	//	是否显示 textarea
										isFouse:false	//	textarea 是否获取焦点
									}
									if (i === 0) {
										item.isTaskMore = true;
										item.moreButText = '收起详情';
										_this.CustomerInfo.VehicleInfoSN = resjson.data[i].VehicleInfoSN;
										_this.CustomerInfo.CustomerName = resjson.data[i].CustomerName;
										_this.CustomerInfo.CustomerTelephone = resjson.data[i].CustomerTelephone;
										_this.CustomerInfo.VehiclePlateNo = resjson.data[i].VehiclePlateNo;
										_this.CustomerInfo.VehicleVIN = resjson.data[i].VehicleVIN;
										_this.CustomerInfo.VehicldeModelFullName = resjson.data[i].VehicldeModelFullName;
										_this.CustomerInfo.CustomerIsNoBother = resjson.data[i].CustomerIsNoBother;
									}
									if (resjson.data[i].TraceTaskTaskType === '任务') {
										if (resjson.data[i].SaleChanceCategory !== '售后' && resjson.data[i].SaleChanceCategory !== '其他服务') {
											item.isTraceResult = false;
										}
									}
									
									list.push(item);
								}
								_this.TraceTask = list;
							}
						}
                        if (resjson.state === 'end') {
                            uni.hideLoading();
                        }
						
					},
					Scope: this
				})
			},
			// 回访原因 接口
			zcQueryTraceResultReasonList(value) {
				_this.$ZcPublic.Server.Post({
					IsNeedLogin: true,
					Paras: {
						Name: 'uni_Insure_Detail',
						Action: 'Ext_QueryTraceResultReasonList',
						Data: {
							data: value
						}
					},
					Callback:function(resjson,scope) {
						if (resjson.state === 'back') {
							console.log('回访 原因列表 = ',resjson.data);
							if (!resjson.success) {
								uni.showModal({
									title:'温馨提示',
									showCancel:false,
									content:''+resjson.msg
								})
								return;
							}
							
							if (resjson.data!==null && resjson.data.length > 0) {
								_this.reason.range = [];
								for (let i = 0; i < resjson.data.length; i++) {
									let item = {
										Name:resjson.data[i].Name,
										SN:resjson.data[i].SN
									}
									_this.reason.range.push(item);
								}
							}
						}else {
							
						}
						
					},
					Scope: this
				})
			},
			//  回访任务 保存 接口
			zcSaveTraceTask4Tracing() {
				let newTraceTask = _this.TraceTask;
				for (let i = 0; i < newTraceTask.length; i++) {
					let isNot = _this.doInspectData(newTraceTask[i]);
					if (isNot === false) {
						uni.showModal({
							title: '温馨提示',
							content: '尊敬的用户，您第'+(i+1)+'个任务下次跟进时间未选择！',
							showCancel: false
						});
						return;
					}else if (isNot === '') {
						_this.TraceTask.splice(i,1);
					}
				}
				
				if (_this.isSubmit) {
					uni.showModal({
						title: '温馨提示',
						content: '尊敬的用户，您的任务已完成请返回重新选择！',
						showCancel: false
					});
					return;
				}
				console.log('跟进任务保存数据 = ',_this.TraceTask);
				// return;
				_this.$ZcPublic.Server.Post({
					IsNeedLogin: true,
					Paras: {
						Name: 'uni_Insure_Detail',
						Action: 'Ext_SaveTraceTask4TracingList',
						Data:{
							data: _this.TraceTask
						}
					},
					Callback:function(resjson,scope) {
						if (resjson.state === 'back') {
							console.log('登记 保存 = ',resjson.data);
							if (!resjson.success) {
								uni.showModal({
									title:'温馨提示',
									showCancel:false,
									content:''+resjson.msg
								})
								return;
							}
							
							uni.showToast({
								title: '提交成功！',
								success() {
									uni.navigateBack();
								}
							});
						} else{
							
						}
					},
					Scope: this
				})
			},
			// 	判断每条跟进任务必填项是否填写
			doInspectData(item) {
				let isNot = false
				if (item.TaskStatus != '未完成') {
					_this.isSubmit = true;
				}
				if (item.TraceResult) {
					if (item.TraceResult === '延期') {
						if (item.NextTraceDate) {
							isNot = true;
						}
					}else{
						isNot = true;
					}
				}else {
					isNot = '';
				}
				
				return isNot;
			},
			
			
			// END -------------
			
		}
	}
</script>

<style>
	.zcModel-title{padding: 10upx 20upx;display: flex;color: #999999;}
	.zcModel-active{padding: 20upx;display: flex!important;align-items: center!important;justify-content: flex-end;}
	.icon-shenhezhong:before{
		content: "\e617";
		margin-right: 10upx;
	}
	
	.zcModel-card{margin-bottom: 30upx;}
	.zcModel-card-item{background-color: #FFFFFF;margin-bottom: 4upx;padding: 20upx;font-size: 32upx;box-sizing: border-box;position: relative;}
	.zcModel-card-item view{display: flex;box-sizing: border-box;}

	.zcBold{font-weight: 420!important;}
	.zcModel-card-item-text{white-space: normal;display: block;min-height: 50rpx;line-height: 1.2!important;}
	.zcModel-card-item-stext{width: 100%;height: 100%;min-height: 50rpx;line-height: 1.2!important;font-weight: normal;font-size: 30upx;color: #333333!important;}
	.zcPicker{flex: 1;}
	.zcPicker .uni-input{color: #333333;padding: 0;padding-right: 60upx;width: 100%!important;}
	.icon-riqi:after{
		content: "\e609";
		color: #26a6ff;
		position: absolute;
		right: 10upx;
	}
	.icon-sanjiaojiantoutriangular-copyAf:after{
		content: "\e600";
		color: #CCC;
		position: absolute;
		right: 15upx;
		font-size:36upx !important
	}
    .icon-dianhua{margin-left: 20upx;position: absolute;right: 200upx;}
    .icon-dianhua:before{content: '\e616';color: #3CA4FA;font-size: 46upx;padding: 0 20upx;}
	textarea{line-height: 1;flex: 1;min-height: 43rpx;overflow: hidden;font-size: 30upx!important;height: 100%;}


	.itemMore{max-height: 0;transition: max-height .5s;overflow: hidden;}
	.card_more{background-color: #FFFFFF;display: flex;align-items: center;justify-content: center;}
	.icon-Order-Details-SeeMore{transform: rotate(0deg);transition: 0.5s;}
	.icon-Order-Details-SeeMore:after{
		content: "\e6d6";
	}
	/* 修改样式 */
		.zcModel-card-item view:first-child{min-width: 230upx;color: #333; font-size: 30upx;}
		.zcModel-card-item view:nth-of-type(2),.form_data{
			color: #AFAFAF ;
		}
		.form_data{
			font-size: 30upx !important;
			color: #AFAFAF !important;
			
		}
		.icon-riqi:after{
			font-size: 40upx !important;
		}
		.save_btn{
			width: 30% !important;
			background-color: #3CA4F9 !important;
			color: #fff;
			border-right: 10upx;
			font-size: 34upx;
		}
</style>
